<template>
  <view class="user-item" @click="handleClick">
    <view>
      <TImage
        :src="data.avatar"
        :width="isSelectedStyle.wh"
        :height="isSelectedStyle.wh"
        border-radius="50%"
        :border="isSelectedStyle.border"
        :box-shadow="isSelectedStyle.boxShadow"
        error-img-type="person"
        mode="aspectFill"
      />
    </view>
    <view
      class="name text-overflow-1"
      :style="{ color: isSelectedStyle.color, fontSize: isSelectedStyle.fontSize }"
    >
      {{ data.name }}
      <text v-if="!data.name">未填写</text>
    </view>
    <view v-if="data.self" class="tag">
      <CustomTag
        text="自己"
        font-size="20rpx"
        color="#FFFFFF"
        background-color="#2878FF"
        padding="4rpx 12rpx"
      />
    </view>
    <view v-else-if="data.isRegister" class="tag">
      <CustomTag
        text="已报名"
        font-size="20rpx"
        color="#EA5E0E"
        background-color="linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)"
        padding="4rpx 12rpx"
      />
    </view>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import { computed, getCurrentInstance, onMounted, ref, type PropType } from 'vue';
  import type { RegisterIdAppUserInfo } from '@/api/activity/types';

  const props = defineProps({
    selectedId: {
      type: Number,
      default: undefined,
    },
    data: {
      type: Object as PropType<RegisterIdAppUserInfo>,
      default: () => ({}),
    },
  });

  const emits = defineEmits(['click', 'userListWidth']);
  const isSelected = computed(() => {
    if (!props.selectedId) return false;
    return props.selectedId === props.data.appUserInfoId;
  });
  const ins: any = getCurrentInstance();
  const isSelectedStyle = computed<any>(() => {
    return {
      border: isSelected.value ? '4rpx solid  #2878FF' : '2rpx solid rgba(180, 180, 180, 0.6)',
      color: isSelected.value ? '#2878FF' : '#333',
      fontSize: isSelected.value ? '32rpx' : '28rpx',
      boxShadow: isSelected.value ? '0px 0px 20rpx 8px rgba(90, 32, 166, 0.24)' : 'none',
      wh: isSelected.value ? '112rpx' : '96rpx',
    };
  });

  onMounted(() => {
    const query = uni.createSelectorQuery().in(ins);
    query
      .select('.user-item')
      .boundingClientRect((data: any) => {
        emits('userListWidth', data.width);
      })
      .exec();
  });
  const handleClick = () => {
    emits('click', props.data);
  };
</script>
<style lang="scss" scoped>
  .user-item {
    margin-top: 48rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    // gap: 16rpx;
    position: relative;
    width: 120rpx;
    margin-left: 32rpx;
    .name {
      font-weight: bold;
      line-height: 40rpx;
      margin-top: 24rpx;
    }
    .tag {
      position: absolute;
      bottom: 40rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
